<template>
  <div class="app-container">
    <el-form ref="dialogForm" :model="form">
      <el-form-item hidden>
        <el-input v-model="form.group" hidden />
      </el-form-item>
      <el-card>
        <el-row v-for="(question, questionStat) in questions" :key="questionStat">
          <el-col :span="2">{{ question.position }}、</el-col>
          <el-col :span="22">{{ question.title }}</el-col>
          <el-col v-if="question.type === 'radio'" :span="18" :offset="2">
            <el-radio v-for="item in question.optionItem" :key="question.questionId + '_' + item" v-model="form[question.questionId]" :label="item">{{ item }}</el-radio>
          </el-col>
          <el-col v-if="question.type === 'checkbox'" :span="18" :offset="2">
            <el-checkbox-group v-model="form[question.questionId]">
              <el-checkbox v-for="item in question.optionItem" :key="question.questionId + '_' + item" :label="item" />
            </el-checkbox-group>
          </el-col>
          <el-col v-if="question.type === 'textarea'" :span="18" :offset="2">
            <el-input
              v-model="form[question.questionId]"
              type="textarea"
              :rows="3"
            />
          </el-col>
          <el-col v-if="readonly === false" :span="2" :offset="2">
            <span class="help-block" @click="showAnswer(question.questionId)"><i class="fa fa-info-circle" title="答案" /></span>
          </el-col>
          <el-col :ref="question.questionId + '_answer'" :span="20" :offset="2" style="display: none;margin-top: 5px;">
            <span class="help-block"><i class="fa fa-lightbulb-o" title="答案" />&nbsp; {{ question.answer }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" icon="el-icon-check" @click="onSubmit">提 交</el-button>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Examination',
  data() {
    return {
      form: {
        group: undefined
      },
      questions: [],
      readonly: true
    }
  },
  computed: {
    ...mapState({
      user: state => state.user.info
    })
  },
  watch: {
    $route: {
      handler: function(route) {
        const group = route.query && route.query.group
        this.form.group = group
      },
      immediate: true
    }
  },
  mounted() {
    if (!this.user.userId) {
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
    this.loadForm()
  },
  methods: {
    loadForm() {
      if (this.form.group) {
        this.$http.get('/question/examinationPoll', {
          params: {
            'group': this.form.group
          }
        }).then(response => {
          this.questions = response.param.questions
          this.readonly = response.param.readonly
        }).catch(() => {})
      }
    },
    showAnswer(id) {
      const display = this.$refs[id + '_answer'][0].style.display
      if (display === 'none') {
        this.$refs[id + '_answer'][0].style.display = ''
      } else {
        this.$refs[id + '_answer'][0].style.display = 'none'
      }
    },
    onSubmit() {
      this.$confirm('是否确定提交吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/question/commit', this.form).then(response => {
          this.$alert(response.param, '您的得分', {
            confirmButtonText: '确定',
            callback: action => {}
          })
        }).catch(() => {})
      }).catch(() => {})
    },
    onClose() {
      this.form = {
        group: undefined
      }
      this.questions = []
      this.inputTagVisible = false
      this.readonly = true
    }
  }
}
</script>
